<template>
  <div class="regis-page">
    <el-row class="middle" type="flex" justify="center">
      <el-col class="main">
        <!-- tag -->
        <el-row class="tag">
          <el-col
            :span="12"
            class="user-tag"
            :class="[tagForm.type==0?'active-tag':'']"
            @click.native="tagFormType(0)"
          >
            个人用户
            <div class="tag-line" v-if="tagForm.type == 0"></div>
          </el-col>
          <el-col
            :span="12"
            class="comp-tag"
            :class="[tagForm.type==1?'active-tag':'']"
            @click.native="tagFormType(1)"
          >
            企业用户
            <div class="tag-line" v-if="tagForm.type == 1"></div>
          </el-col>
        </el-row>
        <!-- form -->
        <el-row class="regis-form">
          <el-form ref="tagFormRef" :model="tagForm" :rules="tagFormRules">
            <el-form-item prop="name" v-if="tagForm.type == 0">
              <el-input v-model.trim="tagForm.name" placeholder="真实姓名"></el-input>
            </el-form-item>
            <el-form-item prop="name" v-if="tagForm.type == 1">
              <el-input v-model.trim="tagForm.name" placeholder="公司名"></el-input>
            </el-form-item>
            <el-form-item prop="idNo" v-if="tagForm.type == 0">
              <el-input v-model.trim="tagForm.idNo" placeholder="证件号码"></el-input>
            </el-form-item>
            <el-form-item prop="phone">
              <el-input v-model.trim="tagForm.phone" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model.trim="tagForm.smscode" placeholder="验证码">
                <template slot="suffix">
                  <span class="smscode" v-if="codeTimeShow" @click="sendCode('tagFormRef')">获取验证码</span>
                  <span
                    class="smscode"
                    v-if="!codeTimeShow"
                    style="color: #ccc"
                  >{{sendCodeTime+'s'}}</span>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model.trim="tagForm.password" type="password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="confirmPassword">
              <el-input v-model.trim="tagForm.confirmPassword" type="password" placeholder="确认密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model.trim="tagForm.email" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="checkedVal">
                <span class="user-tip">已阅读并同意</span>
                <span class="user-agment">《用户注册协议》</span>
                <span class="user-agment">《合格投资者承诺书》</span>
              </el-checkbox>
            </el-form-item>
            <el-form-item>
              <div class="submit-btn" @click="onSubmit()">注册</div>
            </el-form-item>
          </el-form>
        </el-row>
        <!-- btn -->
        <el-row>
          <div class="regis-btn" @click="herfTo('login')">登录>></div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import md5 from 'js-md5'
import {getSmscode} from '@/api/publicMd'
import {register} from '@/api/user'

import {validateRules} from '@/utils/validateRules'

export default {
  name: 'regis',
  data() {
    var VConfirmPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入确认密码'))
      } else if (this.tagForm.confirmPassword !== this.tagForm.password) {
        callback(new Error('两次密码不一致'))
      } else {
        callback()
      }
    }
    return {
      timer: '',
      sendCodeTime: 60,
      codeTimeShow: true,
      smscode: '',
      tagForm: {
        name: '', // 姓名\企业
        idNo: '', // 身份证号
        phone: '', // 手机号
        smscode: '', // 短信码
        password: '', // 密码
        confirmPassword: '', // 确认密码
        email: '', // 邮箱
        type: 0 // 注册用户类别
      },
      checkedVal: true,
      tagFormRules: {
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'}
        ],
        idNo: [{validator: validateRules.idNo, trigger: 'blur'}],
        phone: [{validator: validateRules.phoneNumber, trigger: 'blur'}],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {
            min: 6,
            max: 20,
            message: '长度在 6 到 20 个字符',
            trigger: 'blur'
          },
          {
            required: true,
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
            message: '密码必须包含数字和英文',
            trigger: 'blur'
          }
        ],
        confirmPassword: [{validator: VConfirmPassword, trigger: 'blur'}]
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    tagFormType(val) {
      this.tagForm = {
        name: '', // 姓名\企业
        idNo: '', // 身份证号
        phone: '', // 手机号
        smscode: '', // 短信码
        password: '', // 密码
        confirmPassword: '', // 确认密码
        email: '', // 邮箱
        type: val // 注册用户类别
      }
    },
    onSubmit() {
      const _this = this
      if (_this.checkedVal) {
        _this.$refs.tagFormRef.validate((valid,object) => {
        if (valid) {
          this.tagForm.password = this.tagForm.confirmPassword = md5(this.tagForm.password)
          this.tagForm.type = this.tagForm.type==0?1:2
          register({
            ..._this.tagForm
          }).then(res => {
            let {success, message} = res.data

            if (success) {
              let {token, userInfo} = res.data.result
              _this.$store.commit('SET_TOKEN', token)
              _this.$store.commit('SET_USER_INFO', userInfo)
              _this.$message.success(message)
              _this.herfTo('index')
            } else {
              _this.$message.error(message)
            }
          })
        }
      })
      } else {
        _this.$message.error('请勾选已阅读')
      }
      
    },
    herfTo(name) {
      this.$router.push(`/${name}`)
    },
    getCodeTime() {
      this.codeTimeShow = false
      this.timer = setInterval(() => {
        this.sendCodeTime--
        if (this.sendCodeTime === 0) {
          this.codeTimeShow = true
          this.sendCodeTime = 60
          clearInterval(this.timer)
        }
      }, 1000)
    },
    sendCode(formName) {
      const _self = this
      _self.$refs[formName].validateField('phone', phoneError => {
        if (!phoneError) {
          // 获取手机短信
          getSmscode({
            mobile: _self.tagForm.phone,
            smsmode: 1
          }).then(res => {
            let {success, message} = res.data
            if (success) {
              _self.$message.success(message)
              // 验证码倒计时
              _self.getCodeTime()
            } else {
              _self.$message.error(message)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  width: 420px;
  margin: 20px;
  margin-top: 124px;
}
.tag {
  font-size: 18px;
  text-align: center;
  color: #343434;
}
.user-tag,
.comp-tag {
  position: relative;
  line-height: 56px;
}
.tag-line {
  width: 30px;
  height: 3px;
  background: #1d3f95;
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -38px;
  margin: auto;
}
.active-tag {
  font-weight: bold;
  color: #1d3f95;
}

.regis-form {
  margin-top: 20px;
}
.submit-btn {
  background: #0078e8;
  border-radius: 5px;

  font-size: 18px;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
}
.regis-btn {
  padding: 6px;
  font-size: 13px;
  line-height: 13px;
  text-align: center;
  color: #1d3f95;
  cursor: pointer;
}
.smscode {
  font-size: 16px;
  color: #1c3e96;
  padding: 6px 30px;
}
.user-tip {
  font-size: 13px;
  color: #666666;
}
.user-agment {
  font-size: 13px;
  color: #1d3f95;
}
</style>
